// 登录
import React from 'react';
import { observer, useLocalStore } from 'mobx-react-lite';
import { Link } from 'react-router-dom';
import { parse } from 'qs';
import moment from 'moment';
import { Layout, Divider, Breadcrumb } from 'antd';
import * as loginApi from '~/apis/login/loginApi';
import { config } from '~/config/config';
import { HomeHeader } from '~/components/HomeHeader';
import { HomeSideMenu } from '~/components/HomeSideMenu';
import '../more.sass';
import './index.local.sass';

const { Footer, Content } = Layout;

const ListPage = observer(() => {
  const paramsKey = parse(location.search, { ignoreQueryPrefix: true });
  const state = useLocalStore(() => ({
    loading: false,
    tableList: {
      data: [],
      pageNo: 1,
      pageSize: 8,
      totalCount: 0,
      totalPage: 0,
    },
    getData: {},
    id: paramsKey.key as string,
  }));

  const newsList = (params: any) => {
    loginApi.newsList(params).then((res) => {
      state.tableList.data = res.data;
    }).finally(() => {
      state.loading = false;
    });
  };

  const eventsList = (params: any) => {
    loginApi.eventsList(params).then((res) => {
      state.tableList.data = res.data;
    }).finally(() => {
      state.loading = false;
    });
  };

  const expList = (params: any) => {
    loginApi.expList(params).then((res) => {
      state.tableList.data = res.data;
    }).finally(() => {
      state.loading = false;
    });
  };

  const policyList = (params: any) => {
    loginApi.policyList(params).then((res) => {
      state.tableList.data = res.data;
    }).finally(() => {
      state.loading = false;
    });
  };

  const doQuery = (key: string = '1') => {
    const { pageSize } = state.tableList;
    switch (key) {
      case '1':
        newsList({ pageNum: 1, pageSize, type: 1 });
        break;
      case '2':
        newsList({ pageNum: 1, pageSize, type: 0 });
        break;
      case '3':
        policyList({ pageNum: 1, pageSize });
        break;
      case '4':
        expList({ pageNum: 1, pageSize });
        break;
      case '5':
        eventsList({ pageNum: 1, pageSize, showType: 0 });
        break;
      default:
    }
  };

  const onClickMore = () => {
    state.tableList.pageSize += 8;
    doQuery(state.id);
  };

  const { loading,
    tableList: {
      data,
    } } = state;

  const tableOption: any = {
    loading,
    dataSource: data || [],
    rowKey: 'id',
    size: 'small',
  };

  React.useEffect(() => {
    doQuery(state.id);
  }, []);

  // 列表渲染
  const eventsLists = tableOption.dataSource;
  const eventsListItems: any = [];
  eventsLists.forEach((item: any) => {
    eventsListItems.push(
      <li key={item.id}>
        <Link to={`/login/more/details?id=${item.id as string}&key=${paramsKey.key as string}`} >
          <div className="list-container">
            {
              item.mainPicUrl
                ? <img src={`${config.ossUrl}${item.mainPicUrl as string}`} alt='' />
                : <img alt='' />
            }
            <div className="events-content">
              <div className="events-title">
                <h3>{item.title}</h3>
              </div>
              <p>{item.content}</p>
              <div className="events-detail">
                <p>{item.countryName}</p>
                <p>{moment(item.createTime).format('YYYY/MM/DD')}</p>
              </div>
            </div>
          </div>
        </Link>
      </li>,
    );
  });

  return (
    <Layout>
      <HomeSideMenu doQuery={doQuery} id={state.id}/>
      <Layout className="site-layout">
        <HomeHeader />
        <Content className="ml-4 mr-4">
          <Breadcrumb className="mt-2 mb-2">
            <Breadcrumb.Item>
              <Link
                to='/login'
                className="no-underline cursor-pointer"
              >
                Login
              </Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>
              <Link
                to='/login/more'
                className="no-underline cursor-pointer"
              >
                News
              </Link>
            </Breadcrumb.Item>
          </Breadcrumb>
          <div>
            <div className="events-list">
              <ul >
                {eventsListItems}
              </ul>
            </div>
          </div>
        </Content>
        <Footer className="text-center text-xs text-gray-500">
          <Divider>
            <a className="link" onClick={onClickMore}>More</a>
          </Divider>
        </Footer>
      </Layout>
    </Layout>
  );
});

export default ListPage;
